<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <el-row :gutter="32" class="">
      <el-col :xs="24" :sm="24" :lg="8" class="mb15 ">
        <div class="card-panel bgwhite radius10 plr10 ptb20 " @click="handleSetLineChartData('newVisitis')">
          <div>
            <div class="justify-between bdbe pb20">
              <div>用戶統計</div>
              <div class="pointer" @click="checkUser()">查看更多</div>
            </div>

            <el-segmented v-model="value" :options="options" size="large" @change="(e) => change(e, '1')">
              <template #default="{ item }">
                <div class="flex-col">
                  <div>{{ item }}</div>
                  <div class="shortline2" v-if="item == value">
                  </div>
                  <div class="lineff" v-else></div>
                </div>

              </template>
            </el-segmented>
            <div class="align-center">
              <div class="align-center">
                <div class="dot-blue dot"></div>
                <div>今日新增</div>
              </div>
              <count-to :start-val="0" :end-val="myUserData" :duration="3000" class="ft46 ml10" />

            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" class="mb15">
        <div class="bgwhite radius10 plr10 ptb20" @click="handleSetLineChartData('newVisitis')">
          <div>
            <div class="justify-between bdbe pb20">
              <div>陪玩統計</div>
              <div class="pointer" @click="checkPlayer()">查看更多</div>
            </div>
            <el-segmented v-model="value2" :options="options2" size="large" @change="(e) => change(e, '2')">
              <template #default="{ item }">
                <div class="flex-col">
                  <div>{{ item }}</div>
                  <div class="shortline2" v-if="item == value2">
                  </div>
                  <div class="lineff" v-else></div>
                </div>

              </template>
            </el-segmented>
            <div class="align-center">
              <div class="align-center">
                <div class="dot-blue dot"></div>
                <div>未審核</div>
              </div>
              <count-to :start-val="0" :end-val="myPlayerData1" :duration="3000" class="ft46 ml10" />
              <div class="align-center ml10p">
                <div class="dot-red dot"></div>
                <div>已通過</div>
              </div>
              <count-to :start-val="0" :end-val="myPlayerData2" :duration="3000" class="ft46 ml10" />
              <div class="align-center ml10p">
                <div class="dot-orange dot"></div>
                <div>已拒絕</div>
              </div>
              <count-to :start-val="0" :end-val="myPlayerData3" :duration="3000" class="ft46 ml10" />

            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" class="mb15">
        <div class="bgwhite radius10 plr10 ptb20" @click="handleSetLineChartData('newVisitis')">
          <div>
            <div class="justify-between bdbe pb20">
              <div>提現統計</div>
              <div class="pointer" @click="checkWithdraw()">查看更多</div>
            </div>
            <el-segmented v-model="value3" :options="options3" size="large" @change="(e) => change(e, '3')">
              <template #default="{ item }">
                <div class="flex-col">
                  <div>{{ item }}</div>
                  <div class="shortline2" v-if="item == value3">
                  </div>
                  <div class="lineff" v-else></div>
                </div>

              </template>
            </el-segmented>
            <div class="align-center">
              <div class="align-center">
                <div class="dot-blue dot"></div>
                <div>未審核</div>
              </div>
              <count-to :start-val="0" :end-val="myWithdrawData1" :duration="3000" class="ft46 ml10" />
              <div class="align-center ml10p">
                <div class="dot-red dot"></div>
                <div>已通過</div>
              </div>
              <count-to :start-val="0" :end-val="myWithdrawData2" :duration="3000" class="ft46 ml10" />
              <div class="align-center ml10p">
                <div class="dot-orange dot"></div>
                <div>已拒絕</div>
              </div>
              <count-to :start-val="0" :end-val="myWithdrawData3" :duration="3000" class="ft46" />

            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row> -->

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="justify-between">
            <div>用戶人數</div>
            <el-segmented v-model="chartValue2" :options="chartOptions2" size="large"
              @change="(e) => chartChange(e, '2')">
              <template #default="{ item }">
                <div class="flex-col">
                  <div>{{ item }}</div>
                  <div class="shortline2" v-if="item == chartValue2">
                  </div>
                  <div class="lineff" v-else></div>
                </div>

              </template>
            </el-segmented>
          </div>
          <bar-chart />

        </div>

      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="justify-between">
            <div>陪玩人數</div>
            <el-segmented v-model="chartValue1" :options="chartOptions1" size="large"
              @change="(e) => chartChange(e, '1')">
              <template #default="{ item }">
                <div class="flex-col">
                  <div>{{ item }}</div>
                  <div class="shortline2" v-if="item == chartValue1">
                  </div>
                  <div class="lineff" v-else></div>
                </div>

              </template>
            </el-segmented>
          </div>
          <line-chart />

        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="justify-between">
            <div>業績榜單走勢圖</div>
            <el-segmented v-model="chartValue3" :options="chartOptions3" size="large"
              @change="(e) => chartChange(e, '3')">
              <template #default="{ item }">
                <div class="flex-col">
                  <div>{{ item }}</div>
                  <div class="shortline2" v-if="item == chartValue3">
                  </div>
                  <div class="lineff" v-else></div>
                </div>

              </template>
            </el-segmented>
          </div>
          <area-chart />
        </div>
      </el-col>
    </el-row>


  </div>
</template>
 
<script setup>
import { rechargeData } from '@/api/homePage.js'
import { reactive, ref, onMounted } from 'vue'
import PanelGroup from './components/PanelGroup.vue';
import { useRouter } from 'vue-router';
// import LineChart from './components/LineChart';
import RaddarChart from './components/RaddarChart.vue';
import PieChart from './components/PieChart.vue';
import BarChart from './components/BarChart.vue';
import LineChart from './components/LineChart.vue'
import areaChart from './components/areaChart.vue';
import CountTo from '@/components/vue-count-to';
import { userData, playerData, withdrawData } from '@/api/homePage.js'
import { getPathIndex } from '@/utils/utils'
import eventBus from '@/utils/eventBus'
onMounted(() => {
  getUserData()
  getPlayerData()
  getWithdrawData()
})
// 数据筛选
const change = (e, type) => {
  console.log('分段器----', e, type)
  let currentIndex = 0
  if (type == 1) {
    currentIndex = options.findIndex((item, index) => item == e)
  } else if (type == 2) {
    currentIndex = options2.findIndex((item, index) => item == e)

  } else if (type == 3) {
    currentIndex = options3.findIndex((item, index) => item == e)

  }
  let myType = currentIndex + 1
  if (type == 1) {
    getUserData(myType)
  }
  if (type == 2) {
    getPlayerData(myType)
  }
  if (type == 3) {
    getWithdrawData(myType)
  }
}
// 用戶統計
const getUserData = (type = 1) => {
  userData({ type: type }).then((res) => {
    console.log('获取用戶統計', res)
    myUserData.value = res.data.data
  })
}
// 陪玩統計
const getPlayerData = (type = 1) => {
  playerData({ type: type }).then((res) => {
    console.log('陪玩統計', res)
    myPlayerData1.value = res.data[0].value
    myPlayerData2.value = res.data[1].value
    myPlayerData3.value = res.data[2].value

  })
}
// 提現統計
const getWithdrawData = (type = 1) => {
  withdrawData({ type: type }).then((res) => {
    myWithdrawData1.value = res.data[0].value
    myWithdrawData2.value = res.data[1].value
    myWithdrawData3.value = res.data[2].value


  })
}
const myUserData = ref(0)
const myPlayerData1 = ref(0)
const myPlayerData2 = ref(0)
const myPlayerData3 = ref(0)

const myWithdrawData1 = ref(0)
const myWithdrawData2 = ref(0)
const myWithdrawData3 = ref(0)

const chartValue1 = ref('本日')
const chartOptions1 = ['本日', '本周', '本月', '上月']
const chartValue2 = ref('本日')
const chartOptions2 = ['本日', '本周', '本月', '上月']
const chartValue3 = ref('本日')
const chartOptions3 = ['本日', '本周', '本月', '上月']
const chartChange = (e, type) => {
  let currentIndex = 0
  let myType = 0
  if (type == 1) {
    currentIndex = chartOptions1.findIndex((item, index) => item == e)
    myType = currentIndex + 1
    eventBus.emit('typeChange', { chart: 'line', type: myType })
  }
  if (type == 2) {
    currentIndex = chartOptions2.findIndex((item, index) => item == e)
    myType = currentIndex + 1
    eventBus.emit('typeChange', { chart: 'bar', type: myType })
  }
  if (type == 3) {
    currentIndex = chartOptions3.findIndex((item, index) => item == e)
    myType = currentIndex + 1
    eventBus.emit('typeChange', { chart: 'area', type: myType })
  }
  console.log('===___發送消息', myType)

}



const value = ref('本日')
const options = ['本日', '本周', '本月', '上月']
const value2 = ref('本日')
const options2 = ['本日', '本周', '本月', '上月']
const value3 = ref('本日')
const options3 = ['本日', '本周', '本月', '上月']
const lineChartData = reactive({
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
});
const handleSetLineChartData = (type) => {
  lineChartData.value = lineChartData[type];
}
const router = useRouter()

const checkWithdraw = () => {

  let parentPath = getPathIndex('/finance', '/withdraw')[0]
  let childPath = getPathIndex('/finance', '/withdraw')[1]
  eventBus.emit('activeParent', { path: '/finance', index: parentPath })
  eventBus.emit('activeChild', childPath)
  router.push({ path: '/finance/withdraw' })
}

const checkPlayer = () => {
  let parentPath = getPathIndex('/playerManage', '/playerList')[0]
  let childPath = getPathIndex('/playerManage', '/playerList')[1]
  eventBus.emit('activeParent', { path: '/playerManage', index: parentPath })
  eventBus.emit('activeChild', childPath)
  router.push({ path: '/playerManage/playerList' })
}

const checkUser = () => {
  let parentPath = getPathIndex('/user', '/vip')[0]
  let childPath = getPathIndex('/user', '/vip')[1]
  eventBus.emit('activeParent', { path: '/user', index: parentPath })
  eventBus.emit('activeChild', childPath)
  router.push({ path: '/user/vip' })

}

</script>

<style lang="scss" scoped>
.el-segmented {
  --el-segmented-color: #8c95c1;
  --el-segmented-bg-color: transparent;
  --el-segmented-item-selected-color: #3a3f63;
  --el-segmented-item-selected-bg-color: transparent;
  --el-segmented-item-hover-bg-color: transparent;
  // --el-segmented-item-hover-color: #ffffff;
}

.dashboard-editor-container {
  padding: 32px;
  background-color: #faf5f5;
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
